<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-button type="primary" @click="reupdate" style="float: right; margin-left: 5px" icon="el-icon-h-refresh1">刷新列表</el-button>
            <el-input style="width: 50%;float: right" placeholder="搜索客户、手机号、会员卡号" suffix-icon="el-icon-search" v-model="page.search" @keyup.enter.native="reupdate" :on-icon-click="reupdate">
            </el-input>
        </div>
        <el-table :data="list" :stripe="true" height="100%">
            <el-table-column type="index" label="#" :index="dIndex"></el-table-column>
            <el-table-column prop="name" label="客户姓名"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="vipcard" label="会员卡号"></el-table-column>
            <el-table-column prop="balance" label="欠款金额"></el-table-column>
            <el-table-column prop="giftbalance" label="赠送金额"></el-table-column>
            <el-table-column prop="arrivetime" label="最后到店时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    {{scope.row.addtime|hourTime}}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-tooltip content="充值" placement="top" :open-delay="800" v-qx="quanxian.chong">
                        <el-button icon="el-icon-h-chongzhi1" type="success" size="mini" @click="chongzhi(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center bg-light">
            <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-sizes="[15, 30, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import P from '#/src/shop/popup.js'
export default {
    name: 'debtList',
    data() {
        return {
            list: [],
            page: {
                search: '',
                pageSize: 15,
                currentSize: 1,
                total: 0,
            },
            quanxian: {
                chong: 'debt_chong',
            }
        }
    },
    methods: {
        sizeChange: function(val) {
            this.page.pageSize = val
            this.reupdate()
        },
        currentChange: function(val) {
            this.page.currentSize = val
            this.reupdate()
        },
        dIndex(index) {
            return (this.page.currentSize - 1) * this.page.pageSize + index + 1
        },
        chongzhi: async function(row) {
            let res = await P.openRechargePopup({ gid: row.id })
            if (res) C.success(res.data)
            this.reupdate()
        },
        reupdate: async function() {
            let data = await C.ajax('/shop/recharge/debtlist', { page: JSON.stringify(this.page) }, 'post')
            if (data) {
                this.page.total = data.count
                this.list = data.data
            }
        },
    },
    mounted: function() {
        this.reupdate()
    }
}
</script>